<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	
    <title>Attendance check</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
    	#error {
    		color: red; 
    	}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$("#error").delay(5000).fadeOut();
        $(".form").submit(function() {
            var email = $("#email").val();
            var password = $("#password").val();
            var flag = true;
            if (email.length == 0) {
                $("#email-error").css("display", "inline-block");
                flag =  false;
            } else {
            	$("#email-error").css("display", "none");
            }  
            if (password.length == 0) {
            	$("#password-error").css("display", "inline-block");
            	flag = false;
            } else {
            	$("#password-error").css("display", "none");
            }
            
            return flag;
        });
        
    });
    </script>
</head>
<body>

	<div class="wrapper wcol-3">
        <div class="header"><h3 class="center">Login</h3></div>
        <div class="content">
            <form action="admin" class="form" method="post">
            	<span id="error">
            		<c:out value="${errorText.toString()}"></c:out>
            	</span>
                <div class="form__group">
                    <label for="email">Your Email <span id="email-error" style="display: none; color: red;">required field</span></label>
                    <input type="text" class="input" id="email" name="email" />
                </div>
                <div class="form__group">
                    <label for="password">Password <span id="password-error" style="display: none; color: red;">required field</span></label>
                    <input type="password" class="input" id="password" name="password" />
                </div>
                <div class="form__group">
                    <input type="submit" class="btn col-1" id="submit" value="Enter" />
                    <a href="admin?forgot" class="right">Forgot password</a>
                </div>    
                <div class="clear"></div>
            </form>

            <br />
         
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>